{% extends 'common/basic_layout.html' %}

{% block content %}

    <link href="/static/hplus/css/plugins/chosen/chosen.css" rel="stylesheet">
    <script src="/static/hplus/js/plugins/chosen/chosen.jquery.js"></script>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>执行工具
                        </h5>
                    </div>
                    <div class="ibox-content">
                        <form method="post" action="{{ action }}" onsubmit="return preSubmit()" class="form-horizontal">

                            {% csrf_token %}
                            <input type="hidden" id="id" name="id" value="{{ pk }}"/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"> 主机组</label>
                                <div class="col-sm-10">
                                    <select data-placeholder="选择主机组"
                                            multiple class="form-control chosen-select" id="hostgroup"
                                            tabindex="4">
                                        {% for o in hostgroup %}
                                            <option value="{{ o.id }}">{{ o.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"> 主机</label>
                                <div class="col-sm-10">
                                    <select data-placeholder="选择主机"
                                            multiple class="form-control chosen-select"
                                            id="hosts"
                                            tabindex="4">
                                        {% for o in hosts %}
                                            <option value="{{ o.id }}">{{ o.host_name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"> 执行命令</label>
                                <div class="col-sm-10">
                                    <div class="col-sm-10" style="height: 300px" name="tool_script_editor"
                                         id="id_tool_script_editor" class="form-control"></div>
                                    <textarea id="id_tool_script" name="tool_script"
                                              style="display: none">{{ entity.tool_script|default_if_none:"" }}</textarea>
                                </div>
                            </div>
                            <hr/>
                            {% for k,v in param_list %}
                                <div class="form-group">
                                    <label class="col-sm-2 control-label"> {{ k }}</label>
                                    <div class="col-sm-10">
                                        <input id="{{ v }}" name="{{ v }}" placeholder="{{ v }}" class="form-control"/>
                                    </div>
                                </div>
                            {% endfor %}
                            <div class="hr-line-dashed" id="result_line"></div>
                            <div id="result">

                            </div>
                            <script type="text/template" id="tpl">
                                <h3>执行结果</h3>
                                <% _.each(result, function (item) { %>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label"><%= item.host%></label>
                                    <div class="col-sm-10">
                                        <div class="col-sm-10" class="form-control">
                                            <%=item.exec_result.stdout%>
                                            <br/>
                                            <p>其他信息:</p>
                                            <%=item.exec_result.stderr%>
                                        </div>
                                    </div>
                                </div>
                                <% }); %>
                            </script>
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <a href="javascript:void(0)" class="btn btn-primary"
                                       onclick="execute()">执行</a>
                                    <a class="btn btn-white" href="javascript:history.go(-1)">取消</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/static/asserts/require.js"></script>

    <script>
        var result = []
        function execute() {
            layer.load();
            var hosts_id = $('#hosts').val();
            hosts_str = "";
            if (hosts_id != null) {
                for (var i = 0; i < hosts_id.length; i++) {
                    hosts_str += hosts_id[i] + ',';
                }
                hosts_str = hosts_str.substr(0, hosts_str.length - 1)
            }

            var hostsgroup_id = $('#hostgroup').val();
            hostsgroup_str = "";
            if (hostsgroup_id != null) {
                for (var i = 0; i < hostsgroup_id.length; i++) {
                    hostsgroup_str += hostsgroup_id[i] + ',';
                }
                hostsgroup_str = hostsgroup_str.substr(0, hostsgroup_str.length - 1)
            }
            $.post('/frontend/tools_manager/tools_script_list/tool_execute_action/', {
                'hostids': hosts_str,
                'hostgroup_ids': hostsgroup_str,
                'id': '{{ pk }}',
                'csrfmiddlewaretoken': '{{ csrf_token }}',
                {% for k,v in param_list %}
                    '{{ v }}': $('#{{ v }}').val(),
                {% endfor %}
            }, function (rs) {
                debugger;
                result = rs;
                for (var i = 0; i < result.length; i++) {
                    result[i].err_msg = result[i].err_msg.replace(/\n/g, "<br/>")
                    if (typeof(result[i].exec_result) == 'string') {
                        var exec_result_object = {
                            'stdout': result[i].exec_result.replace(/\n/g, "<br/>"),
                            'stderr': result[i].err_msg
                        }
                        result[i].exec_result = exec_result_object;
                    } else {
                        result[i].exec_result.stdout = result[i].exec_result.stdout.replace(/\n/g, "<br/>")
                        result[i].exec_result.stderr = result[i].exec_result.stderr.replace(/\n/g, "<br/>")
                    }
                }
                debugger;
                $('#result').html(_.template($('#tpl').html(), result));
                layer.closeAll('loading');
            })
        }
        var editor;
        $(document).ready(function () {
            $('.chosen-select').chosen();
            require.config({paths: {ace: "/static/asserts/ace/lib/ace"}})
            define('editor', ['ace/ace'],
                function (ace, langtools) {
                    editor = ace.edit("id_tool_script_editor");
                    editor.setTheme("ace/theme/xcode");
                    editor.session.setMode("ace/mode/yaml");
                    editor.setReadOnly(true);
                    require(["ace/requirejs/text!src/ace"], function (e) {
                        editor.setValue($('#id_tool_script').val());
                    })
                }
            );
            require(['editor'])
        });
    </script>
{% endblock %}